<template>
  <div class="count">
    <template v-for="(item, index) in dataList">
      <el-card shadow="hover" class="count_card" :key="index">
        <div class="card_left">
          <i
            class="iconfont left_icon color1"
            v-if="index == 0"
            v-html="item.icon"
          ></i>
          <i
            class="iconfont left_icon color2"
            v-if="index == 1"
            v-html="item.icon"
          ></i>
          <i
            class="iconfont left_icon color3"
            v-if="index == 2"
            v-html="item.icon"
          ></i>
          <i
            class="iconfont left_icon color4"
            v-if="index == 3"
            v-html="item.icon"
          ></i>
          <i
            class="iconfont left_icon color5"
            v-if="index == 4"
            v-html="item.icon"
          ></i>
          <i
            class="iconfont left_icon color6"
            v-if="index == 5"
            v-html="item.icon"
          ></i>
        </div>
        <div class="card_right">
          <div class="right_count">{{ item.count }}</div>
          <div class="right_name">{{ item.name }}</div>
        </div>
      </el-card>
    </template>
  </div>
</template>

<script>
export default {
  name: 'count',
  data() {
    return {
      dataList: [
        {
          name: '投诉总量',
          icon: '&#xe64d;',
          count: 541,
        },
        {
          name: '报修总量',
          icon: '&#xe654;',
          count: 5,
        },
        {
          name: '点击量',
          icon: '&#xe636;',
          count: 154,
        },
        {
          name: '用户总量',
          icon: '&#xe611;',
          count: 15,
        },
        {
          name: '未读消息',
          icon: '&#xe634;',
          count: 23,
        },
        {
          name: '待办事项',
          icon: '&#xe647;',
          count: 5,
        },
      ],
    }
  },
  methods: {},
}
</script>

<style scoped>
.count {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.count_card {
  width: 16%;
  height: 100%;
  border: none;
  box-shadow: 10px 10px 5px #eee;
}
.count_card >>> .el-card__body {
  padding: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.card_left {
  width: 50%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.card_right {
  width: 50%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.left_icon {
  font-size: 40px;
}
.right_count {
  font-size: 26px;
  color: #515a6e;
}
.right_name {
  font-size: 12px;
  color: #999;
}
.color1 {
  color: rgb(105, 192, 255);
}
.color2 {
  color: rgb(255, 192, 105);
}
.color3 {
  color: rgb(149, 222, 100);
}
.color4 {
  color: rgb(155, 180, 243);
}
.color5 {
  color: rgb(255, 149, 146);
}
.color6 {
  color: rgb(245, 183, 206);
}
</style>